<template>
    <div class="register">
        <div class="left-side">
            <div class="register-content">
                <p class="left-side-tittle">申请运营</p>
                <ElForm
                    ref="formRef"
                    :model="numberValidateForm"
                    class="register-ruleForm"
                    label-position="top"
                    :rules="rules"
                    :inline="true"
                >
                    <ElFormItem label="企业名" prop="name">
                        <ElInput
                            v-model="numberValidateForm.name"
                            class="register-input"
                            type="text"
                            autocomplete="off"
                        ></ElInput>
                    </ElFormItem>

                    <ElFormItem label="电话" prop="phone">
                        <ElInput
                            v-model.number="numberValidateForm.phone"
                            class="register-input"
                            type="text"
                            autocomplete="off"
                        ></ElInput>
                    </ElFormItem>

                    <ElFormItem label="邮箱" prop="email">
                        <ElInput
                            v-model="numberValidateForm.email"
                            class="register-input"
                            type="text"
                            autocomplete="off"
                        ></ElInput>
                    </ElFormItem>

                    <ElFormItem label="域名" prop="domain">
                        <ElInput
                            v-model="numberValidateForm.domain"
                            class="register-input"
                            type="text"
                            autocomplete="off"
                        ></ElInput>
                    </ElFormItem>

                    <ElFormItem label="企业信用码" prop="integrity">
                        <ElInput
                            v-model="numberValidateForm.integrity"
                            class="register-input business-code"
                            type="text"
                            autocomplete="off"
                        ></ElInput>
                    </ElFormItem>

                    <ElFormItem label="简介" prop="introduce">
                        <ElInput
                            v-model="numberValidateForm.introduce"
                            class="register-introduce"
                            type="textarea"
                            autocomplete="off"
                            maxlength="200"
                            placeholder="请输入简介"
                            show-word-limit
                            rows="3"
                            resize="none"
                        ></ElInput>
                    </ElFormItem>

                    <ElFormItem>
                        <ElButton
                            v-logAction="{
                                page: '/register',
                                item: 'register',
                                descriptions: '用户点击注册提交按钮',
                            }"
                            type="primary"
                            class="registerBtn"
                            @click="submitForm(formRef)"
                        >
                            提交
                        </ElButton>
                        <p class="register-back">
                            已有帐号，
                            <ElButton
                                v-logAction="{
                                    page: '/register',
                                    item: 'login',
                                    descriptions: '用户点击立即登录按钮',
                                }"
                                type="text"
                                class="register-back-btn"
                                @click="backToLogin"
                            >
                                马上登录
                            </ElButton>
                        </p>
                    </ElFormItem>
                </ElForm>
            </div>
        </div>
        <div class="right-side fr"></div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import type { ElForm } from 'element-plus';
import { useRouter } from 'vue-router';
import { registerApi } from '@/api/api.query.util';
import { debounce } from '@/utils/utils';

type FormInstance = InstanceType<typeof ElForm>;
const formRef = ref<FormInstance>();

const numberValidateForm = reactive({
    name: '',
    phone: '',
    email: '',
    domain: '',
    integrity: '',
    introduce: '',
});

const rules = reactive({
    name: [
        {
            required: true,
            message: '请输入企业名',
        },
        {
            min: 2,
            message: '长度不低于2个字符',
            trigger: 'blur',
        },
    ],
    phone: [
        {
            required: true,
            message: '请输入手机号码',
        },
        {
            type: 'number',
            message: '电话号码必须是数字',
        },
    ],
    email: [
        {
            required: true,
            message: '请输入邮箱',
        },
        {
            min: 2,
            message: '长度不低于2个字符',
            trigger: 'blur',
        },
    ],
    domain: [
        {
            required: true,
            message: '请输入域名',
        },
        {
            min: 2,
            message: '长度不低于2个字符',
            trigger: 'blur',
        },
    ],
    integrity: [
        {
            required: true,
            message: '请输入企业信用码',
        },
        {
            min: 2,
            message: '长度不低于2个字符',
            trigger: 'blur',
        },
    ],
    introduce: [
        {
            required: true,
            message: '请输入简介',
        },
        {
            min: 2,
            message: '长度不低于2个字符',
            trigger: 'blur',
        },
    ],
});

const router = useRouter();
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    debounce(() => {
        formEl.validate((valid) => {
            if (valid) {
                registerApi({
                    method: 'POST',
                    data: {
                        name: numberValidateForm.name,
                        phone: numberValidateForm.phone,
                        email: numberValidateForm.email,
                        domain: numberValidateForm.domain,
                        number: numberValidateForm.integrity,
                        content: numberValidateForm.introduce,
                    },
                }).then(() => {
                    router.push({ path: '/success' });
                });
            }
        });
    }, 500);
};
function backToLogin() {
    router.push({ path: '/login' });
}
</script>

<style lang="scss" scoped>
.register {
    display: flex;
    justify-content: row;
    align-items: center;
    font-size: 'PingFang-SC-Bold';
    .left-side {
        width: 66vw;
        display: flex;
        justify-content: center;
        align-item: center;
    }
    .right-side {
        width: 34vw;
        height: 100vh;
        background: url('../../assets/image/register_banner.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .register-content {
        width: 800px;
        .left-side-tittle {
            font-size: 26px;
            color: #333;
            font-weight: 600;
            margin-bottom: 35px;
        }
        .registerBtn {
            width: 592px;
            margin-top: 8px;
            font-size: 14px;
            background-color: #3ab0a2;
            border-radius: 4px;
            color: #fff;
        }
        .register-back {
            text-align: center;
            font-family: AdobeHeitiStd-Regular;
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 18px;
            letter-spacing: 0px;
            color: #333333;
        }
        .register-back-btn {
            color: #3ab0a2;
        }
    }
    .register-input {
        width: 290px;
        height: 42px;
        border-radius: 5px;
    }
    .business-code {
        width: 592px;
    }
    .register-introduce {
        width: 592px;
        border-radius: 5px;
    }
}
/deep/ .el-form-item {
    margin-bottom: 20px;
}
/deep/ .el-form--label-top .el-form-item__label {
    padding: 0px;
}
/deep/ .el-form-item__label {
    line-height: 20px;
}
</style>
